import {vtdata} from "../../../database/vtdata.js";
import {Pagenator} from "../../static/javascripts/pagenator.js";
import {RenderData} from "../../static/javascripts/renderdata.js";
import {SearchGroup} from "../../static/javascripts/searchgroup.js";

export var name = "vtlist"

export function render(){
    return `
        <style>
            .ul-continar {
                position: relative;
                text-align: center;
            }
            .search-group{ 
                display: flex;
            }
            
            .search-group div{ 
                max-width: 100px;
            }
            ${Pagenator.createStyle()}
        </style>
        <div class="container mt-5">
            <div>服务列表</div>
            
            <div class="search-group">
            
                <div class="input-group mb-3" >
                  <span class="input-group-text" id="basic-addon1">ID</span>
                  <input id="idStart" type="text" style="max-width: 80px" class="form-control" placeholder="1" aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <span>~</span>
                <div class="input-group mb-3" >
                  <input id="idEnd" type="text" style="max-width: 80px" class="form-control" placeholder="10" aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <button class="btn btn-success" id="searchBtn">搜索</button>
                
                <button class="btn" id="refreshBtn"><i class="bi bi-arrow-clockwise"></i></button>
            </div>
            
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">姓名</th>
                            <th scope="col">部门</th>
                            <th scope="col">职位</th>
                            <th scope="col">邮箱</th>
                            <th scope="col">电话</th>
                            <th scope="col">入职日期</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                    </tbody>
                </table>
            </div>
            
            <div class="">
                 <nav aria-label="Page navigation">
                   
                </nav>
            </div>
        </div>
    `
}


export function afterRender(){
    var navContianer= document.querySelector(`nav[aria-label="Page navigation"]`);
    var tbody = document.querySelector(`tbody`);
    //数据展示对象

    Pagenator.config({
            total : vtdata.length, //总数据量
            pageShowNum : 10, //每一页显示多少条数据
            btnNum : 5 , //页码按钮显示多少个
            pageNumSelect : [5,10,15,20],
            contianer : navContianer , //分页器放在什么容器东中
        }
    );

    RenderData.config(
        {...Pagenator.computeIndex(), data : vtdata}
    );

    //实例数据展示 的实例 对象
    var rdObj = new RenderData();

    Pagenator.setRender({
        renderObject : rdObj ,     //传递渲染对象
        renderCallback : render,   //渲染回调函数
        renderToDom : tbody ,          //渲染到什么位置
        virtualCallback : virtualRender ,
    });


    //调用分页器构造函数
    var pgObj = new Pagenator();

    //调用搜索构造函数
    var sgObj = new SearchGroup({
        idStartDom : document.querySelector("#idStart"),
        idEndDom : document.querySelector("#idEnd")
    });

    //获取搜索的按钮
    sgObj.setSearchOrigin({
        "dataObj" : vtdata,
        rdObj,
        pgObj,
        "toDom" : document.querySelector("tbody"),
        virtualRender
    });
    sgObj.search(document.querySelector(`#searchBtn`));
    sgObj.refresh(document.querySelector(`#refreshBtn`));

    function render(data){
        if(data){
            return `
                <tr>
                    <th scope="row">${data.id}</th>
                    <td>${data.name}</td>
                    <td>${data.department}</td>
                    <td>${data.position}</td>
                    <td>${data.email}</td>
                    <td>${data.phone}</td>
                    <td>${data.hireDate}</td>
                </tr>
            `;
        }else{
            return `
                <tr>
                    <th scope="row"></th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            `;
        }
    }

    function virtualRender(domTree,newData){
        var trs = tbody.children; //[tr,tr]    console.log(newData);
        for (let i = 0; i < newData.length; i++) {
            var tds = trs[i].children;
            var values = Object.values(newData[i]);
            for (let j = 0; j < values.length; j++) {
                tds[j].innerText = values[j];
            }
        }

        //10 - values.length(1) = 9
        //[1,10)
        for (var k = newData.length; k < trs.length; k++) {
            var tds = trs[k].children; //[]
            [...tds].forEach(function(td) {
                td.innerText = "";
            })
        }
    }

}

